<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>监控</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <style>
        .padding-right15 {
            padding-right: 15px;
        }
    </style>
</head>
<body>
<div class="layui-row" style="text-align: center">
    <div class="layui-col-sm3 padding-right15">
        <div class="layui-panel">
            <div style="padding: 32px;">
                <div>客户端总数</div>
                <div id="clientTotal"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-sm3 padding-right15">
        <div class="layui-panel">
            <div style="padding: 32px;">
                <div>在线客户端数</div>
                <div id="onlineClient"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-sm3 padding-right15">
        <div class="layui-panel">
            <div style="padding: 32px;">
                <div>映射总数</div>
                <div id="mappingTotal"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-sm3">
        <div class="layui-panel">
            <div style="padding: 32px;">
                <div>已启动映射数</div>
                <div id="startMapping"></div>
            </div>
        </div>
    </div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['jquery'], function(){
        var $ = layui.jquery;
        $(function(){
            $.ajax({
                url: '/stats',
                type: 'GET',
                success: function(res) {
                    if(res.code === 0) {
                        $('#clientTotal').text(res.data.clientTotal);
                        $('#onlineClient').text(res.data.onlineClient);
                        $('#mappingTotal').text(res.data.mappingTotal);
                        $('#startMapping').text(res.data.startMapping);
                    } else {
                        layer.msg(res.msg);
                    }
                },
                error: function(xhr, status, error) {
                    console.log(error)
                }
            });
        });
    });
</script>
</body>
</html>
